<template>
  <div class="home">
    <MyMenuBar></MyMenuBar>

    <img class="banner" src="../assets/imgs/banner.jpg" v-if="!isLogin" />

    <div class="xt-main-container body_panel">

      <div class="item m_t_15 news_panel">
        <img src="@/assets/imgs/title_xxtt_xf.png" />
        <!-- <el-tabs v-model="activeName">
          <el-tab-pane label="学习头条" name="0"> -->
        <div class="el-tabs__content xxtt_bg">
          <div class="el-tab-pane">
            <ul class="item_flex_ul" v-if="topStudyList">
              <li
                v-for="(item, index) in topStudyList.slice(0, 6)"
                :key="index"
                @click="goCurriculum(item)"
              >
                <span class="title">· {{ item.curriculumTitle }}</span>
                <span class="time">{{
                    spliceDateString(item.createTime)
                  }}</span>
              </li>
            </ul>
            <div class="divider"></div>
            <ul class="item_flex_ul">
              <li
                v-for="(item, index) in topStudyList.slice(6, 12)"
                :key="index"
                @click="goCurriculum(item)"
              >
                <span class="title">· {{ item.curriculumTitle }}</span>
                <span class="time">{{
                    spliceDateString(item.createTime)
                  }}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- </el-tab-pane>
        </el-tabs> -->
      </div>

      <div class="funs" v-if="isLogin">
<!--        <el-card shadow="hover" class="first">
          <div slot="header" class="clearfix">
            <span
              class="text_size_24 text_bold title"
              @click="
                goView('/LearningHome/PersonalCenter', { tabName: 'second' })
              "
              >待办事项</span
            >
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="
                goView('/LearningHome/PersonalCenter', { tabName: 'second' })
              "
              >更多</el-button
            >
          </div>
          <div style="display: flex">
            <div style="flex: 1">
              <div
                v-for="(item, index) in todoList"
                :key="'todo' + index"
                class="funs-list link-cell"
                @click="goTodo(item)"
              >
                <p :class="['rank' + (index + 1), 'rank']">{{ index + 1 }}</p>
                <p class="title">{{ item.title }}</p>
                <p
                  class="text_color_429688"
                  style="margin-left: 30px; margin-right: 120px"
                >
                  {{ item.type }}
                </p>
                <p class="text_color_666666">
                  {{ spliceDateString(item.time) }}
                </p>
              </div>
            </div>
          </div>
        </el-card>-->
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span
              class="text_size_24 text_bold title"
              @click="goView('LearningHome/NoticeCenter')"
              >通知公告</span
            >
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="goView('LearningHome/NoticeCenter')"
              >更多</el-button
            >
          </div>
          <div
            v-for="o in noticeList"
            :key="o.i_id"
            class="funs-list link-cell"
            @click="goNewsDetail(o.i_id)"
          >
            <p class="title">{{ o.v_seach_v_notice_title }}</p>
            <p class="text_color_999999">
              {{ spliceDateString(o.dtm_publish_date) }}
            </p>
          </div>
        </el-card>
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span
              class="text_size_24 text_bold title"
              @click="goView('/LearningHome')"
              >待学内容</span
            >
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="goView('/LearningHome')"
              >更多</el-button
            >
          </div>
          <div
            v-for="(item, index) in waitLearnList"
            :key="'learning' + index"
            class="funs-list link-cell"
            @click="goCurriculum(item)"
          >
            <p :class="['rank' + (index + 1), 'rank']">{{ index + 1 }}</p>
            <p class="title">{{ item.curriculumTitle }}</p>
            <p>
              <el-button size="mini" round>继续学习</el-button>
            </p>
          </div>
        </el-card>
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span
              class="text_size_24 text_bold title"
              @click="goView('/LearningHome/OnlineExams')"
              >待考试卷</span
            >
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="goView('/LearningHome/OnlineExams')"
              >更多</el-button
            >
          </div>
          <div
            v-for="(item, index) in waitExamList"
            :key="'exam' + index"
            class="funs-list link-cell"
            @click="goExamDetail(item)"
          >
            <p :class="['rank' + (index + 1), 'rank']">{{ index + 1 }}</p>
            <p class="title">{{ item.paperTitle }}</p>
            <p>
              <el-button size="mini" round>参加考试</el-button>
            </p>
          </div>
        </el-card>
      </div>

      <div class="ad m_b_15" v-if="isLogin">
        <el-carousel height="260px" class="item_flex">
          <el-carousel-item
            v-for="(item, idx) in middleFileList"
            :key="'slide' + idx"
          >
            <img
              style="width: 100%; height: 100%; cursor: pointer"
              :src="item.imgUrl"
              @click="openLink(item.link)"
            />
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="item zgpt_panel"  v-if="1==2">
        <div class="platform_tabs title border_bottom">
          <!-- <div class="tag">办事大厅</div>
          <div class="remark">政治工作一站式服务平台</div> -->

          <img src="@/assets/imgs/title_zgpt.png" />
        </div>
      <div>

    <div class="platform_panel" v-if="1==2">
              <div class="body">
                <div @click="goView('LearningHome/NoticeCenter')" class="zgpt_item">
                  <img src="@/assets/imgs/icon_1.png" />
                  <div class="content">
                    <div class="title">通知公告</div>
                  </div>
                </div>
<!--                <div @click="goView('LearningHome/PoliticalWorkPlan')">
                  <img src="@/assets/imgs/icon_2.png" />
                  <div class="content">
                    <div class="title">工作计划</div>
                  </div>
                </div>-->
                <div @click="goView('LearningHome')" class="zgpt_item">
                  <img src="@/assets/imgs/icon_3.png" />
                  <div class="content">
                    <div class="title">理论学习</div>
                  </div>
                </div>
                <div @click="goView('LearningHome/OnlineExams')" class="zgpt_item">
                  <img src="@/assets/imgs/icon_4.png" />
                  <div class="content">
                    <div class="title">在线考试</div>
                  </div>
                </div>
<!--                <a
                  href="http://oa.xd.mtn/"
                  target="_blank"
                  v-show="roleActiveIndex !== 3"
                >
                  <img src="@/assets/imgs/icon_5.png" />
                  <div class="content">
                    <div class="title">公文办理</div>
                  </div>
                </a>-->

                <div @click="goView('LearningHome/PolicyInterpretation')" class="zgpt_item">
                  <img src="@/assets/imgs/icon_6.png" />
                  <div class="content">
                    <div class="title">政策法规</div>
                  </div>
                </div>
                <div
                  @click="
                    goView('LearningHome/OnlineExams/LearningServices', {
                      type: 5,
                    })
                  " class="zgpt_item" style="border-right:0px;"
                >
                  <img src="@/assets/imgs/icon_7.png" />
                  <div class="content">
                    <div class="title">党费计算器</div>
                  </div>
                </div>
<!--                <div
                  @click="
                    goView('LearningHome/OnlineExams/LearningServices', {
                      type: 3,
                    })
                  "
                >
                  <img src="@/assets/imgs/icon_9.png" />
                  <div class="content">
                    <div class="title">网上调查</div>
                  </div>
                </div>-->
                <a href="http://25.20.240.143/?action=yes" target="_blank"  class="zgpt_item" >
                  <img src="@/assets/imgs/icon_jwyx.png" />
                  <div class="content">
                    <div class="title">党群邮箱</div>
                  </div>
                </a>
<!--                <a href="http://newspaper.qjw.jw" target="_blank">
                  <img src="@/assets/imgs/icon_10.png" />
                  <div class="content">
                    <div class="title">天天读报</div>
                  </div>
                </a>-->
              </div>
            </div>
</div>

        <el-tabs v-model="activeName" v-if="false">
          <el-tab-pane label="办事大厅" name="0" style="height: 160px" >
            <div class="platform_panel">
              <div class="body">
                <div @click="goView('LearningHome/NoticeCenter')">
                  <img src="@/assets/imgs/icon_1.png" />
                  <div class="content">
                    <div class="title">通知公告</div>
                  </div>
                </div>
<!--                <div @click="goView('LearningHome/PoliticalWorkPlan')">
                  <img src="@/assets/imgs/icon_2.png" />
                  <div class="content">
                    <div class="title">工作计划</div>
                  </div>
                </div>-->
                <div @click="goView('LearningHome')">
                  <img src="@/assets/imgs/icon_3.png" />
                  <div class="content">
                    <div class="title">理论学习</div>
                  </div>
                </div>
                <div @click="goView('LearningHome/OnlineExams')">
                  <img src="@/assets/imgs/icon_4.png" />
                  <div class="content">
                    <div class="title">在线考试</div>
                  </div>
                </div>
<!--                <a
                  href="http://oa.xd.mtn/"
                  target="_blank"
                  v-show="roleActiveIndex !== 3"
                >
                  <img src="@/assets/imgs/icon_5.png" />
                  <div class="content">
                    <div class="title">公文办理</div>
                  </div>
                </a>-->

                <div @click="goView('LearningHome/PolicyInterpretation')">
                  <img src="@/assets/imgs/icon_6.png" />
                  <div class="content">
                    <div class="title">政策法规</div>
                  </div>
                </div>
                <div
                  @click="
                    goView('LearningHome/OnlineExams/LearningServices', {
                      type: 5,
                    })
                  "
                >
                  <img src="@/assets/imgs/icon_7.png" />
                  <div class="content">
                    <div class="title">党费计算器</div>
                  </div>
                </div>
<!--                <div
                  @click="
                    goView('LearningHome/OnlineExams/LearningServices', {
                      type: 3,
                    })
                  "
                >
                  <img src="@/assets/imgs/icon_9.png" />
                  <div class="content">
                    <div class="title">网上调查</div>
                  </div>
                </div>-->
                <a href="http://25.20.240.143/?action=yes" target="_blank">
                  <img src="@/assets/imgs/icon_jwyx.png" />
                  <div class="content">
                    <div class="title">党群邮箱</div>
                  </div>
                </a>
<!--                <a href="http://newspaper.qjw.jw" target="_blank">
                  <img src="@/assets/imgs/icon_10.png" />
                  <div class="content">
                    <div class="title">天天读报</div>
                  </div>
                </a>-->
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="教员" name="1" style="height: 160px" v-if="1==2">
            <div class="platform_panel">
              <div class="body">
                 <div @click="goView('LearningHome')">
                  <img src="@/assets/imgs/icon_3.png" />
                  <div class="content">
                    <div class="title">理论学习</div>
                  </div>
                </div>
                <div @click="goView('LearningHome/NoticeCenter')">
                  <img src="@/assets/imgs/icon_1.png" />
                  <div class="content">
                    <div class="title">通知公告</div>
                  </div>
                </div>
                <div @click="goView('LearningHome/PoliticalWorkPlan')">
                  <img src="@/assets/imgs/icon_2.png" />
                  <div class="content">
                    <div class="title">工作计划</div>
                  </div>
                </div>

                <div @click="goView('LearningHome/OnlineExams')">
                  <img src="@/assets/imgs/icon_4.png" />
                  <div class="content">
                    <div class="title">在线考试</div>
                  </div>
                </div>
                <a
                  href="http://oa.xd.mtn/"
                  target="_blank"
                  v-show="roleActiveIndex !== 3"
                >
                  <img src="@/assets/imgs/icon_5.png" />
                  <div class="content">
                    <div class="title">公文办理</div>
                  </div>
                </a>

                <div @click="goView('LearningHome/PolicyInterpretation')">
                  <img src="@/assets/imgs/icon_6.png" />
                  <div class="content">
                    <div class="title">政策法规</div>
                  </div>
                </div>
                <div
                  @click="
                    goView('LearningHome/OnlineExams/LearningServices', {
                      type: 5,
                    })
                  "
                >
                  <img src="@/assets/imgs/icon_7.png" />
                  <div class="content">
                    <div class="title">党费计算器</div>
                  </div>
                </div>
                <div
                  @click="
                    goView('LearningHome/OnlineExams/LearningServices', {
                      type: 3,
                    })
                  "
                >
                  <img src="@/assets/imgs/icon_9.png" />
                  <div class="content">
                    <div class="title">网上调查</div>
                  </div>
                </div>
                <a href="http://25.20.240.143/?action=yes" target="_blank">
                  <img src="@/assets/imgs/icon_jwyx.png" />
                  <div class="content">
                    <div class="title">党群邮箱</div>
                  </div>
                </a>
                <a href="http://newspaper.qjw.jw" target="_blank">
                  <img src="@/assets/imgs/icon_10.png" />
                  <div class="content">
                    <div class="title">天天读报</div>
                  </div>
                </a>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="学员" name="3" style="height: 160px"  v-if="1==2">
            <div class="platform_panel">
              <div class="body">
                <div @click="goView('LearningHome/PoliticalWorkPlan')">
                  <img src="@/assets/imgs/icon_2.png" />
                  <div class="content">
                    <div class="title">工作计划</div>
                  </div>
                </div>
                <div @click="goView('LearningHome/NoticeCenter')">
                  <img src="@/assets/imgs/icon_1.png" />
                  <div class="content">
                    <div class="title">通知公告</div>
                  </div>
                </div>
                <div @click="goView('LearningHome')">
                  <img src="@/assets/imgs/icon_3.png" />
                  <div class="content">
                    <div class="title">理论学习</div>
                  </div>
                </div>
                <div @click="goView('LearningHome/OnlineExams')">
                  <img src="@/assets/imgs/icon_4.png" />
                  <div class="content">
                    <div class="title">在线考试</div>
                  </div>
                </div>
                <a
                  href="http://oa.xd.mtn/"
                  target="_blank"
                  v-show="roleActiveIndex !== 3"
                >
                  <img src="@/assets/imgs/icon_5.png" />
                  <div class="content">
                    <div class="title">公文办理</div>
                  </div>
                </a>

                <div @click="goView('LearningHome/PolicyInterpretation')">
                  <img src="@/assets/imgs/icon_6.png" />
                  <div class="content">
                    <div class="title">政策法规</div>
                  </div>
                </div>
                <div
                  @click="
                    goView('LearningHome/OnlineExams/LearningServices', {
                      type: 5,
                    })
                  "
                >
                  <img src="@/assets/imgs/icon_7.png" />
                  <div class="content">
                    <div class="title">党费计算器</div>
                  </div>
                </div>
                <div
                  @click="
                    goView('LearningHome/OnlineExams/LearningServices', {
                      type: 3,
                    })
                  "
                >
                  <img src="@/assets/imgs/icon_9.png" />
                  <div class="content">
                    <div class="title">网上调查</div>
                  </div>
                </div>
                <a href="http://25.20.240.143/?action=yes" target="_blank">
                  <img src="@/assets/imgs/icon_jwyx.png" />
                  <div class="content">
                    <div class="title">党群邮箱</div>
                  </div>
                </a>
                <a href="http://newspaper.qjw.jw" target="_blank">
                  <img src="@/assets/imgs/icon_10.png" />
                  <div class="content">
                    <div class="title">天天读报</div>
                  </div>
                </a>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="platform_panel" v-if="false">
          <div class="body">
            <a href="http://www.qjw.zy/list-36-1.html" target="_blank">
              <img src="@/assets/imgs/icon_zl.png" />
              <div class="content">
                <div class="title">战略支援报</div>
              </div>
            </a>

            <a href="http://www.xd.mtn/qtxx/xl1.htm" target="_blank">
              <img src="@/assets/imgs/icon_13.png" style="width: 32px" />
              <div class="content">
                <div class="title">校历</div>
              </div>
            </a>
            <a href="http://10.10.11.217" target="_blank">
              <img src="@/assets/imgs/icon_14.png" style="width: 32px" />
              <div class="content">
                <div class="title">集中文印</div>
              </div>
            </a>
            <a
              href="http://www.xd.mtn/copy_1_ggfw.jsp?urltype=tree.TreeTempUrl&wbtreeid=1552"
              target="_blank"
            >
              <img src="@/assets/imgs/icon_15.png" style="width: 32px" />
              <div class="content">
                <div class="title">主官信箱</div>
              </div>
            </a>
            <div @click="goView('LearningHome/Subject')">
              <img src="@/assets/imgs/icon_zhuanti.png" />
              <div class="content">
                <div class="title">专题学习</div>
              </div>
            </div>

            <div @click="goView('')">
              <img src="@/assets/imgs/icon_fzdy_0.png" />
              <div class="content">
                <div class="title">发展党员</div>
              </div>
            </div>

            <div @click="goView('')">
              <img src="@/assets/imgs/icon_gxzj_0.png" />
              <div class="content">
                <div class="title">关系转接</div>
              </div>
            </div>
            <div @click="goView('')">
              <img src="@/assets/imgs/icon_xjgl_0.png" />
              <div class="content">
                <div class="title">休假管理</div>
              </div>
            </div>
            <div @click="goView('')">
              <img src="@/assets/imgs/icon_xxcj_0.png" />
              <div class="content">
                <div class="title">信息采集</div>
              </div>
            </div>
            <div @click="goView('')">
              <img src="@/assets/imgs/icon_zjbl_0.png" />
              <div class="content">
                <div class="title">证件办理</div>
              </div>
            </div>
            <div @click="goView('')">
              <img src="@/assets/imgs/icon_xwsp_0.png" />
              <div class="content">
                <div class="title">新闻审批</div>
              </div>
            </div>
            <div @click="goView('')">
              <img src="@/assets/imgs/icon_flfw_0.png" />
              <div class="content">
                <div class="title">法律服务</div>
              </div>
            </div>
            <div @click="goView('')">
              <img src="@/assets/imgs/icon_xlzx_0.png" />
              <div class="content">
                <div class="title">心理咨询</div>
              </div>
            </div>
            <div @click="goView('')">
              <img src="@/assets/imgs/icon_12.png" />
              <div class="content">
                <div class="title">党团活动</div>
              </div>
            </div>
            <div @click="goView('')">
              <img src="@/assets/imgs/icon_11.png" />
              <div class="content">
                <div class="title">支部小秘书</div>
              </div>
            </div>
            <!-- <div @click="goView('')" v-show="roleActiveIndex===1">
              <img src="@/assets/imgs/icon_2_grey.png" />
              <div class="content">
                <div class="title">工作计划</div>
              </div>
            </div> -->
            <!-- <div @click="goView('')">
              <img src="@/assets/imgs/icon_zhuanti_grey.png" />
              <div class="content">
                <div class="title">专题策划</div>
              </div>
            </div> -->
            <div>
              <div class="content">
                <div class="title"></div>
              </div>
            </div>
            <!-- <div class="for"></div> -->
          </div>
        </div>
      </div>

      <!-- <div class="ad" v-if="!isLogin">
        <el-carousel height="260px" class="item_flex">
          <el-carousel-item v-for="(item, idx) in middleFileList" :key="'slide' + idx">
            <img
              style="width: 100%;height: 100%;cursor: pointer;"
              :src="item.imgUrl"
              @click="openLink(item.link)"
            />
          </el-carousel-item>
        </el-carousel>
      </div> -->

      <div class="item m_t_45 news_panel">
        <img src="@/assets/imgs/title_zgyw.png" />
        <!-- <el-tabs v-model="activeName" @tab-click="goNewsUrl">
          <el-tab-pane label="政工要闻" name="0"> -->
        <div class="el-tabs__content zgyw_bg" style="padding: 20px 0px" v-if="1==1">
          <div class="el-tab-pane">
            <div class="zgyw_lb_bg">
              <el-carousel
                height="330px"
                class="item_flex"
                style="flex: none; width: 568px"
              >
                <el-carousel-item
                  v-for="(item, idx) in slideList"
                  :key="'slide' + idx"
                >
                  <img
                    @click="goPoliticalNews(item.id)"
                    style="width: 100%; height: 100%"
                    :src="item.imgSrc"
                  />
                </el-carousel-item>
              </el-carousel>
            </div>
            <ul class="item_flex_ul">
              <li
                v-for="(item, index) in importantNews"
                :key="index"
                @click="goPoliticalNews(item.tid)"
              >
                <span class="title">· {{ item.title }}</span>
                <span class="time">{{ item.createTime }}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- </el-tab-pane>
        </el-tabs> -->
      </div>

<!--      <div class="item m_t_15 news_panel">
        <img src="@/assets/imgs/title_xxtt_xf.png" />
        &lt;!&ndash; <el-tabs v-model="activeName">
          <el-tab-pane label="学习头条" name="0"> &ndash;&gt;
        <div class="el-tabs__content xxtt_bg">
          <div class="el-tab-pane">
            <ul class="item_flex_ul" v-if="topStudyList">
              <li
                v-for="(item, index) in topStudyList.slice(0, 8)"
                :key="index"
                @click="goCurriculum(item)"
              >
                <span class="title">· {{ item.curriculumTitle }}</span>
                <span class="time">{{
                  spliceDateString(item.createTime)
                }}</span>
              </li>
            </ul>
            <div class="divider"></div>
            <ul class="item_flex_ul">
              <li
                v-for="(item, index) in topStudyList.slice(8, 16)"
                :key="index"
                @click="goCurriculum(item)"
              >
                <span class="title">· {{ item.curriculumTitle }}</span>
                <span class="time">{{
                  spliceDateString(item.createTime)
                }}</span>
              </li>
            </ul>
          </div>
        </div>
        &lt;!&ndash; </el-tab-pane>
        </el-tabs> &ndash;&gt;
      </div>-->

      <!-- <div class="item m_t_15"> -->
        <!-- <div class="platform_tabs title border_bottom">
          <div class="tag" @click="openMore(1)">学习排行</div>
        </div> -->

        <!-- <div class="home-xxph"> -->
          <!-- <div style="margin-right:37px;">
            <a href="javaScript:;" @click="openMore(2)"><img src="../assets/imgs/home-title-bg1.png" /></a>
            <div class="item">
              <div class="content">
                <div class="list list-title">
                  <p class="rank-label">排名</p>
                  <p class="text_color_333333">单位</p>
                  <p class="text_color_333333" style="width:80px;flex:none;">平均学分</p>
                </div>
                <div v-for="(item,index) in deptRankList" :key="'dept' + index" class="list">
                  <p class="rank-label">
                    <span :class="['rank'+(index+1)]">{{index+1}}</span>
                  </p>
                  <p
                    class="text_color_333333"
                    style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                    :title="item.deptName"
                  >{{item.deptName}}</p>
                  <p class="text_color_333333" style="width:80px;flex:none;">{{item.deptPoints}}</p>
                </div>
              </div>
            </div>
          </div> -->
          <!-- <div>
             <a href="javaScript:;" style="display: block;" @click="openMore(1)"><img src="../assets/imgs/home-title-bg.png" /></a>
            <div class="item">
              <div class="content" v-for="(list,indexs) in studentRankList" :key="'curriculums' + indexs">
                <div class="list list-title">
                  <p class="rank-label">排名</p>
                  <p class="text_color_333333">姓名</p>
                  <p class="text_color_333333" style="width:80px;flex:none;">学分</p>
                </div>
                <div
                  v-for="(item,index) in list"
                  :key="'curriculum' + index"
                  class="list"
                >
                  <p class="rank-label">
                    <span :class="indexs==0?['rank'+(index+1)]:'rank5'">{{(indexs*5)+(index+1)}}</span>
                  </p>
                  <p
                    class="text_color_333333"
                    style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                    :title="item.userName"
                  >{{item.userName}}</p>
                  <p class="text_color_333333" style="width:80px;flex:none;">{{item.points}}</p>
                </div>
              </div>
            </div>
          </div> -->
        <!-- </div> -->
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
const MyMenuBar = () => import("../components/MyMenuBar");

function sliceList(list) {
  let result = [];
  if (list.length > 5) {
    result = list.slice(0, 5);
  } else {
    result = list;
  }
  return result || [];
}

export default {
  name: "Home",
  components: {
    MyMenuBar,
  },
  data() {
    return {
      activeName: "0",
      tabsList: [
        { text: "政工要闻", id: 1, items: [] },
        { text: "学习头条", id: 2, items: [] },
      ],
      roleActiveIndex: 1,
      rankList: {
        course: [],
        unit: [],
      },
      todoList: [],
      noticeList: [],
      waitLearnList: [],
      waitExamList: [],
      curriculumRankList: [],
      deptRankList: [],
      topStudyList: [],
      studentRankList: [],
      slideList: [],
      importantNews: [],
      middleFileList: [],
    };
  },
  computed: {
    isLogin() {
      return this.$store.state.userInfo.name;
    },
  },
  watch: {
    isLogin(value) {
      if (value) {
        this.fetchMore();
      }
      this.changeList();
    },
  },
  created() {
    this.$store.commit("updateActiveMenu", "/");

    this.init();
  },
  methods: {
    init() {
      this.fetchSlide();
      this.fetchStudyRank();
      this.fetchDeptRank();
      this.changeList();
      this.fetchMiddleFileList();
      if (this.isLogin) {
        this.fetchMore();
      }
    },
    fetchMore(refresh) {
      this.fetchNoiceList();
      this.fetchTodo();
      this.fetchLearning();
      this.fetchExam();
    },
    changeList() {
      // 登录前后有差别
      this.getNews();
      this.fetchStudy();
    },
    roleClick(index) {
      this.roleActiveIndex = index;
    },
    goView(url, query) {
      query = query || {};
      if (url) {
        this.$router.push({ path: url, query: query });
      } else {
        this.$notify.info("暂未发布，敬请期待！");
      }
    },
    goNewsUrl() {
      this.$router.push({ path: "LearningHome/PoliticalNews" });
    },
    getNews() {
      var api = "";
      // if (this.isLogin) {
      //   api = utils.api.politicalInfo.newsList
      // } else {
      //   api = utils.api.politicalInfo.routineList
      // }
      api = utils.api.politicalInfo.routineList;
      utils.post(api, {}, (res) => {
        if (res.success) {
          // let list = this.isLogin ? res.data.rows : res.data
          let list = res.data;
          list = list.slice(0, 10);
          list = list.map((item) => {
            return {
              tid: item.i_id || item.businessId,
              title: item.v_notice_title
                ? decodeURI(item.v_notice_title)
                : item.title,
              createTime: (item.dtm_publish_date || item.createTime).substring(
                0,
                10
              ),
            };
          });
          this.importantNews = list;
        }
      });
    },
    goNewsDetail(id) {
      this.$router.push({
        path: "/LearningHome/NoticeCenter/Detail",
        query: { id: id, activeMenu: "/LearningHome/NoticeCenter" },
      });
    },
    goPoliticalNews(id) {
      this.$router.push({
        path: "/LearningHome/PoliticalNews/NewsDetail",
        query: { id: id, activeMenu: "/LearningHome/PoliticalNews" },
      });
    },
    goExamDetail(item) {
      utils.setItem("ExamInstructionsPaperInfo", item);
      this.$router.push({
        path: "/LearningHome/OnlineExams/ExamInstructions",
        query: {
          id: item.paperId || item.id,
        },
      });
    },
    goCurriculum(item) {
      this.$router.push({
        path: "/LearningHome/Learning/CourseIntroduction",
        query: {
          tid: item.curriculumId || item.id,
        },
      });
    },
    goTodo(item) {
      switch (item.type) {
        case "学习":
          this.goCurriculum(item);
          break;
        case "考试":
          this.goExamDetail(item);
          break;
        case "政工计划":
          this.$router.push({
            path: "/LearningHome/PoliticalWorkPlan",
            query: {
              tab: 1,
            },
          });
          break;
        case "公告":
          this.goNewsDetail(item.id);
          break;
      }
    },
    fetchNoiceList() {
      utils.post("/notice/list", {}, (res) => {
        if (res.success) {
          this.noticeList = sliceList(res.data.rows);
        }
      });
    },
    fetchCurriculumRank() {
      utils.post("/homePage/CurriculumRank", {}, (res) => {
        if (res.success) {
          this.curriculumRankList = sliceList(res.data);
        }
      });
    },
    fetchDeptRank() {
      utils.post("/homePage/DeptRanking", {}, (res) => {
        if (res.success) {
          this.deptRankList = sliceList(res.data);
        }
      });
    },
    fetchTodo() {
      utils.post(
        "/homePage/TodoMatters",
        {
          pageNumber: 1,
          pageSize: 5,
        },
        (res) => {
          if (res.success) {
            this.todoList = sliceList(res.data.rows);
          }
        }
      );
    },
    fetchLearning() {
      utils.post("/curriculum/my/forLearningList", {}, (res) => {
        if (res.success) {
          this.waitLearnList = sliceList(res.data);
        }
      });
    },
    fetchExam() {
      utils.post("/examination/NeedExaminationList", {}, (res) => {
        if (res.success) {
          this.waitExamList = sliceList(res.data.rows);
        }
      });
    },
    fetchStudy() {
      var api = "";
      if (!this.isLogin) {
        api = "/curriculum/my/loginoutHeadlines";
      } else {
        api = "/curriculum/my/headlines";
      }
      utils.post(api, {}, (res) => {
        if (res.success) {
          // this.topStudyList = sliceList(res.data);
          this.topStudyList = res.data;
        }
      });
    },
    fetchStudyRank() {
      utils.post(utils.api.sideRank.student, {}, (res) => {
        if (res.success) {
          const lists = [
            [...res.data.slice(0, 5)],
            [...res.data.slice(5, 10)],
            [...res.data.slice(10, 15)],
          ];
          console.log(lists);
          this.studentRankList = lists;
        }
      });
    },
    fetchSlide() {
      utils.post("notice/RoutineFile", {}, (res) => {
        if (res.success) {
          this.slideList = res.data
            .map((item) => {
              return {
                id: item.businessId,
                title: item.title,
                summary: item.zy,
                imgSrc: item.imgUrl,
              };
            })
            .slice(0, 8);
        }
      });
    },
    fetchMiddleFileList() {
      utils.post("homePage/MiddleFile", {}, (res) => {
        if (res.success) {
          this.middleFileList = res.data;
        }
      });
    },
    openLink(href) {
      window.location.href = href;
    },
    openMore(flag) {
      const activeMenu = this.$store.state.activeMenu;
      if (utils.checkStartExam()) {
        if (activeMenu === "/LearningHome/OnlineExams") {
          this.$notify.error("正在考试中");
        }
        return;
      }
      switch (flag) {
        case 1:
          // if (this.$store.state.activeMenu === '/LearningHome/OnlineExams') {
          this.$router.push({
            path: "/LearningHome/StudentsRank",
            query: { activeMenu },
          });
          // } else {
          //   this.$router.push({ path: '/LearningHome/StudentsRank', query: { activeMenu: '/LearningHome/OnlineExams/LearningServices' } })
          // }
          break;
        case 2:
          this.$router.push({
            path: "/LearningHome/DeptRank",
            query: { activeMenu },
          });
          break;
      }
    },
  },
};
</script>
<style lang="less">
@tabs_color: #cb2c21;

.home {
  background-color: transparent;
  height: auto;

  .banner {
    display: flex;
    width: 100%;
    max-height: 536px;
  }

  .body_panel {
    display: flex;
    flex-direction: column;
    width: 100%;

    .item {
      flex: 1;
      height: auto;
      min-height: 100px;
      // background-color: #ffffff;
      // border-radius: 4px;
      // border: solid 1px #cacaca;
    }

    .platform_tabs.title {
      margin: 25px 0px;
      text-align: center;
      .tag {
        cursor: pointer;
        border-bottom: 2px solid @tabs_color;
        margin-top: 25px;
        padding-bottom: 10px;
      }

      .remark {
        margin-left: 37px;
        margin-top: 28px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #999999;
      }
    }
    .zgpt_panel {
      .el-tabs__header {
        margin-bottom: 0px;
      }
      .el-tab-pane {
        border: 1px solid #f1f0f0;
      }
      .el-tabs__content {
        border-top: 3px solid #f41b16;
      }
      .el-tabs__nav-scroll {
        margin-left: 300px;
      }
      .el-tabs__item {
        width: 200px;
        font-size: 18px;
        text-align: center;
      }
      border-bottom: 1px solid #f1f0f0;
    }
    .news_panel {
      text-align: center;
      .el-carousel__indicators--horizontal {
        width: 320px;
        bottom: 20px;
      }
      .el-tabs__item.is-top:nth-child(2) {
        padding-left: 44px;
      }
      .el-tabs__item {
        color: #999999;
      }
      .el-tabs__item.is-active {
        color: @tabs_color;
        font-weight: bold;
      }
      .el-tabs__active-bar {
        background-color: @tabs_color;
        width: 95px !important;
      }
      .el-tabs__nav-wrap::after {
        height: 1px;
        background-color: #f1f0f0;
      }

      .el-tabs__header {
        margin-bottom: 13px;
      }
      .el-tabs__content {
        margin-top: 10px;
        padding-bottom: 20px;
      }
      .el-tab-pane {
        display: flex;

        .item_flex,
        .item_flex_ul {
          flex: 1;
        }

        ul.item_flex_ul {
          padding: 0px 25px 0px 41px;
          margin-top: 18px;
          li {
            cursor: pointer;
            font-size: 16px;
            list-style: none;
            color: #333333;
            display: flex;
            align-items: center;
            line-height: 30px;
            overflow: hidden;
            text-align: left;
            .title {
              width: 0px;
              flex: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .time {
              color: #999999;
              margin-left: auto;
              margin-right: 0px;
            }
          }
        }

        .divider {
          width: 1px;
          background-color: #f1f0f0;
          margin-top: 30px;
          margin-bottom: 20px;
        }
      }
    } .el-tabs__nav-scroll {
      margin-left: 500px !important;
    }
    .zgyw_bg {
      background: url(../assets/imgs/zgyw_bg.png) repeat-x;
      .zgyw_lb_bg {
        margin: 10px 0px 10px 30px;
        padding: 20px;
        width: 570px;
        background: url(../assets/imgs/zgyw_lb_bg.png) repeat-x;
      }
    }
    .xxtt_bg {
      background: url(../assets/imgs/xxtt_bg.png) repeat-x;
      min-height: 250px;
    }

    .platform_panel {
      border:1px solid #f1f0f0;
      background: white;
      height: 160px;
      .header {
        ul {
          height: 80px;
          border-bottom: 1px solid #f1f0f0;
          display: flex;
          justify-content: center;
          padding: 0px;
          margin: 0px;

          li {
            display: flex;
            align-items: center;
            cursor: pointer;
            width: 193px;
            height: 80px;
            font-size: 18px;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
            padding: 0px;
            justify-content: center;

            img {
              height: 46px;
              margin-right: 13px;
            }
          }

          li.active {
            background: #f4f4f4;
          }
        }
      }

      .body {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(4, 1fr);
       // background-color: #f1f0f0;
        grid-gap: 1px;
        div,
        a {
          height: 80px;
          display: flex;
          align-items: center;
          background: white;
          cursor: pointer;
          text-decoration: none;
          padding-left: 50px;
          .content {
            padding-left: 0px;
            .title {
              padding-left: 0px;
              margin-left: 15px;
              font-size: 14px;
              font-weight: bold;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #333333;
            }
          }
        }
        .two {
          grid-column-end: span 2;
        }
        .for {
          grid-column-end: span 5;
        }
        .zgpt_item {
          border-right: 1px solid #f1f0f0;
          border-bottom: 1px solid #f1f0f0;
        }
      }
    }

    .ad {
      margin: 30px 0px 30px 0px;
      display: block;
    }

    .home-xxph {
      display: flex;
      padding: 33px 74px;
      position: relative;

      img {
        margin: 0 auto;
        display: block;
        width: 132px;
      }

      .item {
        display: flex;
        width: 1050px;
        background-color: #ffffff;
        border-radius: 10px;
        border: solid 1px #f1f0f0;
        margin-top: -22px;
        .content {
          min-width: 250px;
          padding: 40px 50px 35px 50px;
          font-size: 16px;

          .rank-label {
            width: 32px;
            text-align: center;
          }

          .list {
            display: flex;
            align-items: center;

            &.list-title {
              font-weight: bold;
              p {
                margin-right: auto;
                margin-left: auto;
              }
            }

            p {
              margin-top: 7px;
              margin-bottom: 7px;
              &:not(:first-child) {
                flex: 1;
                justify-content: center;
                text-align: center;
              }
            }
          }

          .rank1 {
            width: 16px;
            height: 16px;
            background-color: #f41b16;
            border-radius: 4px;
            color: white;
            text-align: center;
            line-height: 16px;
            font-size: 12px;
            display: inline-flex;
            justify-content: center;
          }

          .rank2 {
            width: 16px;
            height: 16px;
            background-color: #f46f16;
            border-radius: 4px;
            color: white;
            text-align: center;
            line-height: 16px;
            font-size: 12px;
            display: inline-flex;
            justify-content: center;
          }
          .rank3 {
            width: 16px;
            height: 16px;
            background-color: #f4c216;
            border-radius: 4px;
            color: white;
            text-align: center;
            line-height: 16px;
            font-size: 12px;
            display: inline-flex;
            justify-content: center;
          }
          .rank4,
          .rank5 {
            width: 16px;
            height: 16px;
            background-color: #888888;
            border-radius: 4px;
            color: white;
            text-align: center;
            line-height: 16px;
            font-size: 12px;
            display: inline-flex;
            justify-content: center;
          }
        }
      }
    }

    .funs {
      margin-top: 30px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      //grid-template-rows: repeat(2, 1fr);
      grid-gap: 24px;

      .first {
        grid-column-end: 3 span;
      }

      .el-card__header {
        padding-left: 0px;
      }

      .clearfix {
        .title {
          color: #cb2c21;
          margin-left: 22px;
          border-bottom: 2px solid #cb2c21;
          margin-top: 25px;
          padding-bottom: 10px;
          cursor: pointer;
        }
        .el-button--text {
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 22.5px;
          letter-spacing: 0px;
          color: #666666;
        }
      }
      .funs-list {
        display: flex;
        align-items: center;
        margin-bottom: 14px;
        overflow: hidden;

        p {
          height: 30px;
          line-height: 30px;
        }

        .title {
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #333333;
        }

        .rank {
          width: 30px;
          height: 30px;
          border-radius: 15px;
          color: white;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 25px;
        }

        .rank1 {
          background-color: #df1632;
        }

        .rank2 {
          background-color: #f46a2d;
        }

        .rank3 {
          background-color: #f2ac17;
        }

        .rank4,
        .rank5 {
          background-color: #999999;
        }
      }
    }
  }
}
.link-cell {
  cursor: pointer;
}
</style>
